<template>
  <b-col cols="12" lg="6" class="mb-3">
    <div class="my-card py-3">
      <b-row class="mx-1" >
        <b-col cols="12">
          <b-row class="">
            <b-col cols="6">
              <p class="m-0">
                <b-avatar
                    :variant="user.avatarcolor"
                    :src="genavatar"
                    size="35px"
                    :to="genusersrc"
                    v-b-popover.hover.top="'点击查看个人信息'"
                ></b-avatar>
                <span class="ml-2 ">{{user.nickname}} </span>
              </p>
            </b-col>
            <b-col cols="6" class="text-right my-auto " :class="statusclass">
              <span class="text-dark">状态：</span> {{statusmsg}}
            </b-col>
          </b-row>
          <b-row class="mt-2"  @click="gotopub" >
            <b-col cols="4">
              <b-img :src="genimgsrc" rounded fluid/>
            </b-col>
            <b-col cols="8" class="pl-0">
              <h5>{{item.title}}</h5>
              <p>
                {{item.description}}
              </p>
            </b-col>
          </b-row>
          <b-row>
            <b-col class="mt-2">
              <span class="price color-number">￥{{item.price}} </span>
            </b-col>

<!--            for buyers' option-->
            <b-col cols="8" class="text-right mt-1" v-if="side">
              <b-button variant="danger" class="mr-1 px-1" @click.stop="disorder" v-if="order.status===0">取消订单</b-button>
              <b-button variant="danger" class="mr-1 px-1" disabled v-else>取消订单</b-button>
              <b-button variant="info" class="mr-1 px-1" @click.stop="confirmorder" v-if="order.status ===1">确认收货</b-button>
              <b-button variant="info" class="mr-1 px-1" @click.stop="showcomment = true" v-if="order.status ===2&&(!order.fromcomment)">评价</b-button>

<!--            for sellers' option-->
            </b-col>
            <b-col cols="8" class="text-right mt-1" v-else>
              <b-button variant="danger" class="mr-1 px-1" @click.stop="disorder" v-if="order.status===0">取消订单</b-button>
              <b-button variant="danger" class="mr-1 px-1" disabled v-else>取消订单</b-button>
              <b-button variant="warning" class="mr-1 px-1" @click.stop="showsend = true" v-if="order.status ===0">发货</b-button>
              <b-button variant="info" class="mr-1 px-1" @click.stop="showcomment = true" v-if="order.status ===2&&(!order.tocomment)">评价</b-button>


            </b-col>
            <b-col cols="12" v-if="order.status >= 1">
              <h6 class="m-0 p-0 mt-1">快递单号：{{order.trackid}}</h6>
            </b-col>
            <b-col cols="12" v-if="showsend">
              <b-form-group
                label="快递单号："
                label-for="input-1"

              >
                <b-form-input
                    id="input-1"
                    placeholder="10-15位字母或者数字"
                    v-model="form.track"
                    @blur="validid"
                    :state="state.track"
                    trim
                ></b-form-input>
                <b-form-invalid-feedback v-text="warn.track"></b-form-invalid-feedback>
              </b-form-group>
            </b-col>
            <b-col cols="12" class="text-center" v-if="showsend">
              <b-button class="mr-2 mr-md-3 px-3 px-md-4" variant="primary" @click="setTrack">提交</b-button>
              <b-button class="px-3 px-md-4" @click="showsend =false">取消</b-button>
            </b-col>
            <b-col cols="12" v-if="showcomment">
              <b-form-group
                  label="评价："
                  label-for="input-2"

              >
                <b-form-input
                    id="input-2"
                    placeholder="10-25个字"
                    v-model="form.comment"
                    @blur="validcomment"
                    :state="state.comment"
                    trim
                ></b-form-input>
                <b-form-invalid-feedback v-text="warn.comment"></b-form-invalid-feedback>
              </b-form-group>
            </b-col>
            <b-col cols="12" class="text-center" v-if="showcomment">
              <b-button class="mr-2 mr-md-3 px-3 px-md-4" variant="primary" @click="commentorder">提交</b-button>
              <b-button class="px-3 px-md-4" @click="showcomment =false">取消</b-button>
            </b-col>
          </b-row>
        </b-col>
      </b-row>
    </div>
  </b-col>
</template>

<script>
  import urlconfig from "../urlconfig";

  export default {
    name: "OrderItem",
    props: ['item','user','order','side'],
    data(){
      return{
        //状态 of order  0 已下单   1 已发货    2 已收货    3 交易完成   4 异常查封
        statusmap:[
          {class:'text-info',msg:'已下单'},
          {class:'text-primary',msg:'已发货'},
          {class:'text-warning',msg:'已收货/待评价'},
          {class:'text-success',msg:'交易完成'},
          {class:'text-danger',msg:'异常锁定'},
        ],
        form: {
          track:'',
          comment:''
        },
        warn:{
          track:'',
          comment:''
        },
        state:{
          track:null,
          comment:null
        },
        showsend:false,
        showcomment:false,
      }
    },
    computed:{
      statusclass(){
        return this.statusmap[this.order.status].class
      },
      statusmsg(){
        return this.statusmap[this.order.status].msg
      },
      genavatar(){
        return urlconfig.baseUrl+urlconfig.avatarResource+this.user.avatarpath
      },
      genusersrc(){
        return '/user/'+this.user.uuid
      },
      genimgsrc(){
        return urlconfig.baseUrl+urlconfig.fileResources+this.item.files[0].filename
      }
    },
    methods:{
      makeToast(msg, res = true) {
        this.$bvToast.toast(msg, {
          title: res ? '操作成功!' : '操作失败！',
          variant: res ? 'primary' : 'danger',
          solid: true,
          autoHideDelay: 5000,
        })
      },
      gotopub(){
        this.$router.push('/item/'+this.item.itemid)
      },
      validid(){
        let pattern = /^[\w\d]{10,15}$/
        if (pattern.test(this.form.track)){
          this.state.track = true
          return true
        }else{
          this.warn.track = '格式不符'
          this.state.track = false
          return false
        }
      },
      validcomment(){
        if (this.form.comment.length >10 &&this.form.comment.length<25){
          this.state.comment = true
          return true
        }else{
          this.warn.comment = '格式不符'
          this.state.comment = false
          return false
        }
      },
      setTrack(){
        if (this.validid()){
          let data ={
            itemid:this.item.itemid,
            orderid:this.order.orderid,
            trackid:this.form.track
          }
          this.$ajax.post('/order/sendOrder',data).then(resp=>{
            let data = resp.data
            if (data.code === 200){
              this.makeToast(data.msg)
              this.$emit('refresh')
              this.showsend =false
            }else{
              this.makeToast(data.msg,false)
            }
          }).catch(err=>{
            this.makeToast('请求失败',false)
          })
        }
      },
      disorder(){
        let data = {
          orderid:this.order.orderid,
          itemid:this.item.itemid
        }
        this.$ajax.post('/order/disorder',data).then(resp=>{
          let data = resp.data
          if (data.code === 200){
            this.makeToast(data.msg)
            this.$emit('refresh')
          }else{
            this.makeToast(data.msg,false)
          }
        }).catch(err=>{
          this.makeToast('请求失败',false)
        })
      },
      confirmorder(){
        let data = {
          orderid:this.order.orderid,
          itemid:this.item.itemid
        }
        this.$ajax.post('/order/confirmOrder',data).then(resp=>{
          let data = resp.data
          if (data.code === 200){
            this.makeToast(data.msg)
            this.$emit('refresh')
          }else{
            this.makeToast(data.msg,false)
          }
        }).catch(err=>{
          this.makeToast('请求失败',false)
        })
      },
      commentorder(){
        let data = {
          orderid:this.order.orderid,
          side:this.side?'buy':'sell',
          comment:this.$ajax.encode(this.form.comment)
        }
        this.$ajax.post('/order/commentOrder',data).then(resp=>{
          let data = resp.data
          if (data.code === 200){
            this.makeToast(data.msg)
            this.$emit('refresh')
            this.showcomment = false
          }else{
            this.makeToast(data.msg,false)
          }
        }).catch(err=>{
          this.makeToast('请求失败',false)
        })
      }
    }
  }
</script>

<style scoped>
  .my-card {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: #6e6e6e 1px 1px 5px;
  }
  .price{
    font-size: 1.3em;
    font-weight: bold;
  }

</style>